<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body></body>
	<script>
		const vNode = {
			tag: 'div',
			props: {
				onClick: () => alert('Click')
			},
			children: 'click me'
		}
		function render(vNode, container) {
			// 创建dom 元素
			const el = document.createElement(vNode.tag)
			// 遍历props，将属性和事件 添加到dom 元素上
			for (const key in vNode.props) {
				if (/^on/.test(key)) {
					// 如果以on 开头，说明是事件
					el.addEventListener(key.substring(2).toLocaleLowerCase(), vNode.props[key])
				}
			}
			// 处理children
			if (typeof vNode.children === 'string') {
				el.appendChild(document.createTextNode(vNode.children))
			} else if (Array.isArray(vNode.children)) {
				// 递归调用render 函数渲染子节点，使用当前el 挂载
				vNode.children.forEach((element) => {
					render(element, el)
				})
			}
			container.appendChild(el)
		}
		render(vNode, document.body)
		const bucket = new Set()
		const data = { name: 'zs' }
		const effect = () => {
			document.body.innerText = proxyData.name
		}
		// 对原数据进行代理
		const proxyData = new Proxy(data, {
			// 拦截读取属性
			get(target, key) {
				bucket.add(effect)

				console.log('%c [  ]-12', 'font-size:13px; background:pink; color:#bf2c9f;', target[key])
				return target[key]
			},
			set(target, key, value) {
				console.log('%c [  ]-26', 'font-size:13px; background:pink; color:#bf2c9f;', value)
				target[key] = value
				bucket.forEach((fn) => fn())
			}
		})

		effect()
		setTimeout(() => {
			proxyData.name = 'llll'
		}, 3000)

		let arr = [{ a: '11', b: 'e' }, { a: '22' }]
		let obj = { ...arr.map((item) => ({ id: item.a })) }

		console.log('%c [  ]-39', 'font-size:13px; background:pink; color:#bf2c9f;', obj)
	</script>
</html>
